<template>
    <view class="container">
      <view class="user-card card">
        <view class="user-info">
          <view class="avatar-container" @click="uploadAvatar">
            <image 
              class="avatar" 
              :src="userInfo.avatar || '/static/images/default-avatar.png'" 
              mode="aspectFill"
            ></image>
            <view class="avatar-edit">更换</view>
          </view>
          <view class="user-detail">
            <view class="user-name">{{ userInfo.real_name || userInfo.username }}</view>
            <view class="user-role">{{ getRoleName }}</view>
          </view>
        </view>
        <view class="user-meta">
          <view class="meta-item">
            <text class="meta-label">手机号码</text>
            <text class="meta-value">{{ userInfo.phone || '未设置' }}</text>
          </view>
          <view class="meta-item">
            <text class="meta-label">注册时间</text>
            <text class="meta-value">{{ formatDate(userInfo.created_at) }}</text>
          </view>
        </view>
      </view>
      
      <view class="menu-card card">
        <view class="menu-title">个人中心</view>
        <view class="menu-list">
          <view class="menu-item" @click="navigateTo('/pages/profile/info')">
            <view class="menu-item-content">
              <text class="menu-icon">📝</text>
              <text class="menu-name">基本信息</text>
            </view>
            <text class="menu-arrow">›</text>
          </view>
          <view class="menu-item" @click="navigateTo('/pages/enrollment/status/status')">
            <view class="menu-item-content">
              <text class="menu-icon">📋</text>
              <text class="menu-name">报名状态</text>
            </view>
            <text class="menu-arrow">›</text>
          </view>
          <view class="menu-item" @click="navigateTo('/pages/study/study')">
            <view class="menu-item-content">
              <text class="menu-icon">📚</text>
              <text class="menu-name">学习进度</text>
            </view>
            <text class="menu-arrow">›</text>
          </view>
          <view class="menu-item" @click="navigateTo('/pages/exam/results/results')">
            <view class="menu-item-content">
              <text class="menu-icon">📊</text>
              <text class="menu-name">考试成绩</text>
            </view>
            <text class="menu-arrow">›</text>
          </view>
          <view class="menu-item" @click="navigateTo('/pages/profile/password')">
            <view class="menu-item-content">
              <text class="menu-icon">🔒</text>
              <text class="menu-name">修改密码</text>
            </view>
            <text class="menu-arrow">›</text>
          </view>
        </view>
      </view>
      
      <view class="menu-card card" v-if="isAdmin">
        <view class="menu-title">管理员功能</view>
        <view class="menu-list">
          <view class="menu-item" @click="navigateTo('/pages/admin/enrollment')">
            <view class="menu-item-content">
              <text class="menu-icon">📋</text>
              <text class="menu-name">报名管理</text>
            </view>
            <text class="menu-arrow">›</text>
          </view>
          <view class="menu-item" @click="navigateTo('/pages/admin/exam')">
            <view class="menu-item-content">
              <text class="menu-icon">📝</text>
              <text class="menu-name">考试管理</text>
            </view>
            <text class="menu-arrow">›</text>
          </view>
          <view class="menu-item" @click="navigateTo('/pages/admin/coach')">
            <view class="menu-item-content">
              <text class="menu-icon">👨‍🏫</text>
              <text class="menu-name">教练管理</text>
            </view>
            <text class="menu-arrow">›</text>
          </view>
          <view class="menu-item" @click="navigateTo('/pages/admin/user')">
            <view class="menu-item-content">
              <text class="menu-icon">👥</text>
              <text class="menu-name">用户管理</text>
            </view>
            <text class="menu-arrow">›</text>
          </view>
        </view>
      </view>
      
      <view class="menu-card card" v-if="isCoach">
        <view class="menu-title">教练功能</view>
        <view class="menu-list">
          <view class="menu-item" @click="navigateTo('/pages/coach/students')">
            <view class="menu-item-content">
              <text class="menu-icon">👨‍🎓</text>
              <text class="menu-name">我的学员</text>
            </view>
            <text class="menu-arrow">›</text>
          </view>
          <view class="menu-item" @click="navigateTo('/pages/coach/schedule')">
            <view class="menu-item-content">
              <text class="menu-icon">📅</text>
              <text class="menu-name">教学安排</text>
            </view>
            <text class="menu-arrow">›</text>
          </view>
        </view>
      </view>
      
      <view class="action-container">
        <button class="btn-logout" @click="handleLogout">退出登录</button>
      </view>
    </view>
  </template>
  
  <script>
  import { mapGetters, mapActions } from 'vuex';
  import { formatDate } from '@/utils/date';
  
  export default {
    data() {
      return {};
    },
    computed: {
      ...mapGetters('user', [
        'userInfo',
        'isAdmin',
        'isCoach',
        'isStudent'
      ]),
      getRoleName() {
        const roleMap = {
          'admin': '管理员',
          'coach': '教练员',
          'student': '学员'
        };
        return roleMap[this.userInfo.role] || '用户';
      }
    },
    onLoad() {
      // 获取用户信息
      this.getUserInfo();
    },
    methods: {
      ...mapActions('user', [
        'getUserInfo',
        'updateAvatar',
        'logout'
      ]),
      formatDate,
      navigateTo(url) {
        uni.navigateTo({
          url
        });
      },
      uploadAvatar() {
        uni.chooseImage({
          count: 1,
          sizeType: ['compressed'],
          sourceType: ['album', 'camera'],
          success: res => {
            const tempFilePath = res.tempFilePaths[0];
            
            uni.showLoading({
              title: '上传中...'
            });
            
            this.updateAvatar(tempFilePath)
              .then(() => {
                uni.hideLoading();
                this.showToast('头像上传成功', 'success');
              })
              .catch(err => {
                uni.hideLoading();
                this.showToast(err.message || '头像上传失败');
              });
          }
        });
      },
      handleLogout() {
        this.showModal('确认退出登录吗？')
          .then(confirm => {
            if (confirm) {
              this.logout().then(() => {
                uni.reLaunch({
                  url: '/pages/login/login'
                });
              });
            }
          });
      }
    }
  };
  </script>
  
  <style lang="scss">
  .container {
    padding: 30rpx;
  }
  
  .user-card {
    padding: 30rpx;
    margin-bottom: 30rpx;
  }
  
  .user-info {
    display: flex;
    margin-bottom: 30rpx;
  }
  
  .avatar-container {
    position: relative;
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 30rpx;
  }
  
  .avatar {
    width: 100%;
    height: 100%;
  }
  
  .avatar-edit {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40rpx;
    line-height: 40rpx;
    text-align: center;
    font-size: 20rpx;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  .user-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .user-name {
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
  }
  
  .user-role {
    font-size: 28rpx;
    color: #666;
  }
  
  .user-meta {
    border-top: 1px solid #eee;
    padding-top: 20rpx;
  }
  
  .meta-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16rpx;
  }
  
  .meta-label {
    font-size: 28rpx;
    color: #666;
  }
  
  .meta-value {
    font-size: 28rpx;
    color: #333;
  }
  
  .menu-card {
    padding: 30rpx;
    margin-bottom: 30rpx;
  }
  
  .menu-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }
  
  // .menu-list {
    
  // }
  
  .menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 0;
    border-bottom: 1px solid #eee;
  }
  
  .menu-item:last-child {
    border-bottom: none;
  }
  
  .menu-item-content {
    display: flex;
    align-items: center;
  }
  
  .menu-icon {
    font-size: 36rpx;
    margin-right: 20rpx;
  }
  
  .menu-name {
    font-size: 30rpx;
    color: #333;
  }
  
  .menu-arrow {
    font-size: 36rpx;
    color: #999;
  }
  
  .action-container {
    margin-top: 60rpx;
    margin-bottom: 40rpx;
  }
  
  .btn-logout {
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    font-size: 32rpx;
    color: #f56c6c;
    background-color: #fff;
    border: 1px solid #f56c6c;
    border-radius: 8rpx;
  }
  </style>